<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!-- 引入公共head ,注意：('API集市') 括号中的文字需要换成自己页面的标题名称-->
<head th:include="common/head ::commonHeader('API详情')">
</head>
<body>
	<!-- 引入公共的头 -->
	<div class="navBaseDiv" th:include="common/navigation ::navigation"></div>
	<!-- 代码具体区域 -->
	<div class="realDiv">
		<div>
			<!--左侧侧-->
		</div>
		<div>
			<div class="kongbai">
				<!--空白  -->
			</div>
			<div class="showDiv0">
				<div></div>
				<div>
					<div>
						<!--左侧  -->
						<div>
						</div>
						<div>
							<div id="apiImg" >
							
							</div>
						</div>
						<div></div>
					</div>
					<div>
						<!--右侧  -->
						<div>
							<div>
								<b></b>
							</div>
							<div>
								<form class="form-inline">
									<button class="btn btn-info" type="button" id="requestApi" servicecode="0" categorycode="0">点击申请</button>
								</form>
							</div>
						</div>
						<div>
							<div>
								<div>调用次数:</div>
								<div id="usedCount"></div>
							</div>
							<div>
								<div>服务商:</div>
								<div id="serviceName"></div>
							</div>
							<div>
								<div>APIKEY:</div>
								<div>
									<a>获取APIKEY</a>
								</div>
							</div>
							<div>
								<div>服务简介:</div>
								<div id="shortDesc"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="kongbai">
				<!--空白  -->
			</div>
			<!-- vue -- v-cloak解决刷新或者加载出现闪烁（显示变量） -->
			<div id="basicDiv" v-cloak>
				<div class="showTitleDiv">
					<div @click="tabFun" :num="1" class="tabFun">产品功能</div>
					<div @click="tabFun" :num="2" class="tabFun">API</div>
					<div @click="tabFun" :num="3" class="tabFun">错误参照码</div>
					<div @click="tabFun" :num="4" class="tabFun">示例代码</div>
					<div @click="tabFun" :num="5" class="tabFun"  style="display: none;">联系我们</div>
					<div></div>
				</div>
				<div>
					<div v-show="showDiv1" class="showDiv1">
						<div>
							<h5>
								<b>功能介绍</b>
							</h5>
						</div>
						<div id="funDesc"></div>
						<div>
							<h5>
								<b>功能示例</b>
							</h5>
						</div>
						<div>
							<div  id="funExample" >
								
							</div>
						</div>
					</div>
					<div v-show="!showDiv2" class="showDiv2">
						<div>
							<div>
								<h5>
									<b>API文档</b>
								</h5>
							</div>
							<div>
								<b>接口地址:</b> {{interfaceUrl}}
							</div>
							<div>
								<b>返回格式: </b> {{returnFormat}}
							</div>
							<div>
								<b>请求方式:</b>{{requestType}}
							</div>
							<div>
								<b>请求示例:</b>{{requestExamples}}
							</div>
							<div>
								<b>接口备注:</b>{{interfaceRemark}}
							</div>
						</div>
						<div>
							<div>
								<h5>
									<b>请求参数说明</b>
								</h5>
							</div>
							<div>
								<table class="table table-bordered  table-condensed"
									style="width: 500px;">
									<thead>
										<tr>
											<th>名称</th>
											<th>是/否(必填)</th>
											<th>类型</th>
											<th>说明</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="p in parameters" v-if="p.paramType==1">
											<th scope="row">{{p.paramName}}</th>
											<td v-if="p.isMust==1">是</td>
											<td v-else>否</td>
											<td>{{p.dataType}}</td>
											<td>{{p.remark}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div>
							<div>
								<h5>
									<b>返回参数说明</b>
								</h5>
							</div>
							<div>
								<table class="table table-bordered  table-condensed"
									style="width: 500px;">
									<thead>
										<tr>
											<th>名称</th>
											<th>类型</th>
											<th>说明</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="p in parameters" v-if="p.paramType==2">
											<th scope="row">{{p.paramName}}</th>
											<td>{{p.dataType}}</td>
											<td>{{p.remark}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div>
							<div>
								<h5>
									<b>返回示例展示</b>
								</h5>
							</div>
							<div style="background-color: #F6F6F6">{{returnExamples}}</div>
						</div>
					</div>
					<div v-show="!showDiv3" class="showDiv3">
						<div>
							<h5>
								<b>系统错误码展示</b>
							</h5>
						</div>
						<div>
							<table class="table table-bordered  table-condensed"
								style="width: 500px;">
								<thead>
									<tr>
										<th>错误码</th>
										<th>说明</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="e in serviceErrorCode">
										<th scope="row">{{e.errorCode}}</th>
										<td>{{e.remark}}</td>
									</tr>
								</tbody>
							</table>

						</div>
					</div>
					<div v-show="!showDiv4" class="showDiv4">
						<div>
							<h5>
								<b>示例代码</b>
							</h5>
						</div>
						<div>
							<table class="table table-bordered  table-condensed"
								style="width: 500px;">
								<thead>
									<tr>
										<th>语言</th>
										<th>标题</th>
										<th>提供者</th>
										<th>时间</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="e in serviceExamples">
										<th scope="row">{{e.language}}</th>
										<td><a v-bind:href="e.examplesUrl">{{e.title}}</a></td>
										<td>{{e.author}}</td>
										<td>{{e.updateTime}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div v-show="!showDiv5" class="showDiv5">
						<div>
							<h5>
								<b>联系我们</b>
							</h5>
						</div>
						<div>
							<table class="table table-bordered  table-condensed"
								style="width: 500px;">
								<thead>
									<tr>
										<th>内容</th>
										<th>详情</th>
									</tr>
								</thead>
								<tbody>
									<tr >
										<td>联系电话</td>
										<td>{{phoneNum}}</td>
									</tr>
									<tr >
										<td>客服QQ</td>
										<td>{{QQ}}</td>
									</tr>
									<tr >
										<td>客服微信</td>
										<td>{{WeChart}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="kongbai">
				<!--空白  -->
			</div>
		</div>
		<div>
			<!--右侧-->
		</div>
	</div>
	<!-- 引入公共的尾部 -->
	<div class="footerBaseDiv" th:include="common/footer ::tofooter"></div>

</body>
<script th:src="@{js/modules/api/apidetail.js}"></script>
<script th:inline="javascript">
	var serviceCode=[[${session.serviceCode}]]
</script>
<link rel="stylesheet" th:href="@{css/apidetail/apidetail.css}" />
</html>